<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue-2.5.17.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Runoob!'
                },
                //computed  :基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
                //methods   :在重新渲染的时候，函数总会重新调用执行。
                computed: {
                    // 计算属性的 getter
                    reversedMessage: function () {
                        // `this` 指向 vm 实例
                        return this.message.split('').reverse().join('')
                    }
                }
            })
            var getSetMethod = new Vue({
                el: "#getSet",
                data: {
                    name: "google",
                    url: "www.google.com/"
                },
                computed: {
                    site: {
                        //    getter方法
                        get: function () {
                            return this.name + " >>> " + this.url;
                        },
                        //    setter方法
                        set: function (newValue) {
                            var names = newValue.split(",");
                            this.name = names[0];
                            this.url = names[names.length - 1];
                        }
                    }
                }
            })
            console.log("------------原始的值-------------")
            console.log(getSetMethod.name)
            console.log(getSetMethod.url)
            console.log("------------改变后的值-------------")
            //调用set方法,vm的name和url的值都会改变
            getSetMethod.site = "百度,www.baidu.com/";
            console.log(getSetMethod.name)
            console.log(getSetMethod.url)

            //监听器使用
            var watchLearn = new Vue({
                el: '#watch',
                data: {
                    counter: 1
                }
            });
            watchLearn.$watch("counter", function (nval, oval) {
                console.log('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
            })

            //监听器的使用,米和千米之间的转换
            var convertLearn = new Vue({
                el: "#convert",
                data: {
                    kilometers: 0,
                    meters: 0
                },
                methods: {},
                computed: {},
                watch: {
                    kilometers: function (val) {
                        this.kilometers = val;
                        this.meters = val * 1000;
                    },
                    meters: function (val) {
                        this.meters = val;
                        this.kilometers = val / 1000;
                    }
                }
            })

            convertLearn.$watch("kilometers", function (nValue, oValue) {
                console.log('计数器值的变化 :' + oValue + ' 变为 ' + nValue + '!');
            })

            //模拟购物车
            var cartTableLearn = new Vue({
                el: "#cartTable",
                data: {
                    products: [
                        {
                            id: "1",
                            name: "Iphone X",
                            price: "7899",
                            count: "1"
                        },
                        {
                            id: "2",
                            name: "华为Note9",
                            price: "5899",
                            count: "1"
                        },
                        {
                            id: "3",
                            name: "魅族MX4",
                            price: "6799",
                            count: "1"
                        },
                        {
                            id: "4",
                            name: "小米6",
                            price: "4599",
                            count: "1"
                        }
                    ]
                },
                methods: {
                    decrease: function (id, count) {
                        if (count <= 0) {
                            alert("购买数量不允许小于零");
                            return;
                        }
                        for (var i = 0; i < this.products.length; i++) {
                            if (id === this.products[i].id) {
                                this.products[i].count--;
                                break;
                            }
                        }
                    },
                    increase: function (id, count) {
                        if (count >= 20) {
                            alert("购买数量不允许大于20");
                            return;
                        }
                        for (var i = 0; i < this.products.length; i++) {
                            if (id === this.products[i].id) {
                                this.products[i].count++;
                                break;
                            }
                        }
                    },
                    totalPrice: function () {
                        var totalP = 0;
                        for (var i = 0; i < this.products.length; i++) {
                            totalP += (this.products[i].count * this.products[i].price)
                        }
                        return totalP;
                    }
                }
            })

            new Vue({
                el: "#vbind",
                data: {
                    isActive: true
                },
                methods: {
                    isShow: function () {
                        this.isActive = !this.isActive
                    }
                }
            })

            new Vue({
                el: "#vBindModel",
                data: {
                    message: "请输入姓名...",
                    message2: "多行文本输入...",
                    message3: "请输入年龄...",
                    message4: "请输入地址..."
                }
            })

            new Vue({
                el: "#checkboxBindModel",
                data: {
                    checked: false,
                    checkedNames: []
                }
            })

            new Vue({
                el: "#radioLearn",
                data: {
                    checkedContent: ""
                }
            })

            new Vue({
                el: "#selectedLearn",
                data: {
                    selectedValue: ""
                }
            })

            new Vue({
                el: "#allOrNone",
                data: {
                    checked: false,
                    checkedNames: [],
                    allCheckeds: ["runoob", "baidu", "google"]
                },
                methods: {
                    changeCheckedAll: function () {
                        if (this.checked){
                            this.checkedNames = this.allCheckeds;
                        }else {
                            this.checkedNames = [];
                        }
                    }
                },
                watch:{
                    //监听checkedNames的值,如果读选中,则把选中的按钮点亮
                    checkedNames:function () {
                        if (this.checkedNames.length == this.allCheckeds.length) {
                            this.checked = true;
                        }else{
                            this.checked = false;
                        }
                    }
                }
            })
        }
    </script>
</head>
<style>
    table {
        border: 1px solid black;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        text-align: center;
    }

    .active {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<body>
<!--computed的基本使用-->
<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<hr>
<!--computed的get set方法-->
<div id="getSet">
    <p>{{site}}</p>
</div>
<hr>
<!--监听器watch的使用-->
<div id="watch">
    <p style="font-size:25px;">计数器: {{ counter }}</p>
    <button @click="counter++" style="font-size:25px;">点我</button>
</div>
<hr>
<!--监听器事先米和千米之间的转换-->
<div id="convert">
    千米 : <input type="text" v-model="kilometers"><br>
    米 : <input type="text" v-model="meters"><br>
</div>
<hr>
<!--购物车的模拟-->
<div id="cartTable">
    <table>
        <tr>
            <th>序号</th>
            <th>名称</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <tr v-for="product in products">
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>
                <button @click="decrease(product.id,product.count)">-</button>
                {{product.count}}
                <button @click="increase(product.id,product.count)">+</button>
            </td>
            <td>
                <button @click="product.count = 0">移除</button>
            </td>
        </tr>
    </table>
    购物车商品总价: ${{totalPrice()}}
</div>
<hr>
<div id="vbind">
    <div v-bind:class="{active:isActive}">我在这</div>
    <button @click="isShow()">点击我试试</button>
</div>
<hr>
<!--表单的双向绑定-->
<div id="vBindModel">
    <p>input 元素：</p>
    <input type="text" placeholder="请输入姓名" v-model.trim="message"><br>
    <input type="number" placeholder="请输入年龄" v-model.number="message3"><br>
    <!--类似于change事件-->
    <input type="text" placeholder="请输入地址" v-model.lazy="message4"><br>
    <p>您的姓名是: {{message}}</p>
    <p>您的年龄是: {{message3}}</p>
    <p>请输入地址: {{message4}}</p>

    <p>textarea 元素：</p>
    <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
    <p style="white-space: pre">{{ message2 }}</p>
</div>
<hr>
<!--复选框数据绑定-->
<div id="checkboxBindModel">
    <p>单个复选框：</p>
    <input type="checkbox" id="singleChecked" v-model="checked">
    <label for="singleChecked">{{checked}}</label>

    <p>多个复选框：</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <br>
    <p>选择的值为: {{ checkedNames }}</p>
</div>
<hr>
<div id="radioLearn">
    <!--radio单选-->
    <p>Radio单选</p>
    <input type="radio" value="www.baidu.com" id="baiduRadio" v-model="checkedContent">
    <label for="baiduRadio">百度</label>
    <input type="radio" value="www.google.com" id="googleRadio" v-model="checkedContent">
    <label for="googleRadio">谷歌</label>
    <p>被选中的值: {{checkedContent}}</p>
</div>
<hr>
<div id="selectedLearn">
    <!--Selected单选-->
    <p>Selected单选</p>
    <!--<select v-model="selectedValue">-->
    <!--类似于change事件-->
    <select v-model.lazy="selectedValue">
        <option value="">请选中一个地址</option>
        <option value="上海市闵行区">上海市闵行区</option>
        <option value="深圳市南山区">深圳市南山区</option>
    </select>
    <p>选中的城市是: {{selectedValue}}</p>
</div>
<hr>
<div id="allOrNone">
    <p>全选和全不选实例</p>
    <p>全选</p>
    <input type="checkbox" id="checkId" v-model="checked" @change="changeCheckedAll()">
    <label for="checkId">{{checked}}</label>

    <p>多个复选框</p>
    <input type="checkbox" id="runoobId" v-model="checkedNames" value="runoob">
    <label for="runoobId">菜鸟</label>
    <input type="checkbox" id="baiduId" v-model="checkedNames" value="baidu">
    <label for="baiduId">百度</label>
    <input type="checkbox" id="googleId" v-model="checkedNames" value="google">
    <label for="googleId">谷歌</label>

    <p>您选中的网站为: {{checkedNames}}</p>

</div>
</body>
</html>






















